<!--
 * @Author: ShaXin
 * @Date: 2022-01-06 14:08:56
 * @LastEditors: tc
 * @LastEditTime: 2022-02-18 10:13:51
-->
<template>
    <div class="warp">
        <div class="title">
            <div style="height:25px"></div>
            <div class="titleV">{{titleName?titleName:'水库'}}</div>
        </div>
        <div class="contentV">
            <div class="content_left">
                <el-input placeholder="请输入关键词搜索" prefix-icon="el-icon-search" v-model="filterText"> </el-input>
                <el-tree
                    ref="tree"
                    v-loading="treeLoading"
                    :data="data"
                    node-key="code"
                    @node-click="handleNodeClick"
                    highlight-current
                    :default-expanded-keys="defaultExpandedKeys"
                    :filter-node-method="filterNode"
                    :props="defaultProps">
                </el-tree>
            </div>
            <div class="content_right" v-loading="mixinLoading">
                <div class="content_right_left">
                    <div class="content_right_left_serch">
                        <span style="color:#333333;font-size: 14px;">日期：</span>
                        <el-date-picker @change="onDatepicker" v-model="value" popper-class="input_ys" type="date" placeholder="选择日期"> </el-date-picker>
                        <el-select v-model="value02" class="input_ys" @change="onSelectTime" placeholder="请选择时间">
                            <el-option
                            v-for="item in 23"
                            :key="item"
                            :label="item"
                            :value="item">
                            </el-option>
                        </el-select>
                        <span v-if="geologyEntityList.length > 1" style="color:#333333;font-size: 14px;">传感器：</span>
                        <el-select v-if="geologyEntityList.length > 1" v-model="geologyEntityCode" class="input_ys" @change="onSelectGeology" placeholder="请选择传感器">
                            <el-option
                            v-for="(item , index) in geologyEntityList"
                            :key="index"
                            :label="item.sensorName"
                            :value="item.sensorCode">
                            </el-option>
                        </el-select>
                        <!-- <el-radio-group v-model="radio1" @change="onRadio">
                            <el-radio-button label="剖面"></el-radio-button>
                            <el-radio-button label="曲线"></el-radio-button>
                            <el-radio-button label="3D"></el-radio-button>
                        </el-radio-group> -->
                    </div>
                    <div class="content_right_left_bottom">
                        <div class="content_right_left_bottom_top_card">
                            <el-image
                            v-if="getGeologysImge != null"
                            style="width: 100%; height: 100%"
                            :src="Url+getGeologysImge"
                            fit="fit"/>
                            <div v-else class="zanwuImg">暂无数据</div>
                        </div>
                        <div class="content_right_left_bottom_bottom">
                            <div class="title" style="height:40px">
                                <div style="height:10px"></div>
                                <div class="titleV" style="font-size: 17px;">告警信息</div>
                            </div>
                            <div class="echart_curve">
                                <echartCurve v-if="reservoirData" :data="reservoirData"/>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="content_right_right">
                    <!-- <div class="content_right_right_top">
                        <div class="title" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV" style="font-size: 17px;">告警信息</div>
                        </div>
                        <div class="tableBox">
                            <div class="tableBox_left">
                                <dv-scroll-board v-if="statusConfig.data.length > 0" :config="statusConfig" class="gai_yangs"/>
                                <div class="txt_zanwu" v-else>暂无设备状况</div>
                            </div>
                            <div class="tableBox_right">
                                <dv-scroll-board v-if="abnormalConfig.data.length > 0" :config="abnormalConfig" class="gai_yangs"/>
                                <div class="txt_zanwu" v-else>暂无堤坝风险</div>
                            </div>
                        </div>
                    </div> -->
                    <div class="content_right_right_center">
                        <div>
                            <div class="title" style="height:40px">
                                <div style="height:10px"></div>
                                <div class="titleV" style="font-size: 17px;">实况视频</div>
                            </div>
                            <div class="video-ty">
                                 <!-- <video ref="videos" id='videoccc' style="width:100%;height:100%" controls playsInline webkit-playsinline autoplay>
                                    <source src="http://hls01open.ys7.com/openlive/9639422188de45f69486238d68b91d2d.hd.m3u8" type="" />
                                </video> -->
                                <video class="video-ya" preload="auto" controls autoplay="autoplay" ref="videos" muted loop src="@/assets/img/shipin111.mp4"></video>
                            </div>
                        </div>
                        <div>
                            <div class="title" style="height:40px">
                                <div style="height:10px"></div>
                                <div class="titleV" style="font-size: 17px;">堤坝风险等级</div>
                            </div>
                            <div class="echart_risk">
                                <echartRisk v-if="reservoirData" :data="reservoirData" />
                            </div>
                        </div>
                        
                    </div>
                    <div class="content_right_right_bottom">
                        <div class="title" style="height:40px">
                            <div style="height:10px"></div>
                            <div class="titleV" style="font-size: 17px;">实况查询</div>
                        </div>
                        <div class="content_right_right_bottom_card">
                            <div class="bg1">
                                <div class="card_left">
                                    <div class="card_left_name">水位</div>
                                    <div class="card_left_detail">{{reservoirData != null && reservoirData.z?reservoirData.z:'--'}} m</div>
                                </div>
                                <div class="card_right">
                                     <el-image
                                    :src="require('../../assets/img/dashboard/水位.png')"
                                    fit="fit"/>
                                </div>
                            </div>
                            <div class="bg2">
                                <div class="card_left">
                                    <div class="card_left_name">降水</div>
                                    <div class="card_left_detail">{{reservoirData != null && reservoirData.r?reservoirData.r:'--'}} mm</div>
                                </div>
                                <div class="card_right">
                                     <el-image
                                    :src="require('../../assets/img/dashboard/降水.png')"
                                    fit="fit"/>
                                </div>
                            </div>
                            <div class="bg3">
                                <div class="card_left">
                                    <div class="card_left_name">风力风向</div>
                                    <div class="card_left_detail">{{reservoirData != null && reservoirData.fx?reservoirData.fx:'--'}} {{reservoirData != null && reservoirData.fxGrade?reservoirData.fxGrade:'--'}}</div>
                                </div>
                                <div class="card_right">
                                     <el-image
                                    :src="require('../../assets/img/dashboard/风力风向.png')"
                                    fit="fit"/>
                                </div>
                            </div>
                            <div class="bg4">
                                <div class="card_left">
                                    <div class="card_left_name">温度</div>
                                    <div class="card_left_detail">{{reservoirData != null && reservoirData.temp?reservoirData.temp:'--'}} ℃</div>
                                </div>
                                <div class="card_right">
                                     <el-image
                                    :src="require('../../assets/img/dashboard/温度.png')"
                                    fit="fit"/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { formatTimestamp } from '@/utils/common'
import { Url } from '@/api/url'
import commonApi from '@/api/index'
import homeApi from '@/api/home'
import echartCurve from './echartCurve.vue'
import echartRisk from './echartRisk.vue'
import EZUIKit from "../../../static/EZUIKit-JavaScript/ezuikit.js"
export default {
    name: 'index',
    components: {
        echartCurve,
        echartRisk
    },
    data() {
        return {
            Url,
            statusList:[],
            statusConfig:{
                header:['设备状况'],
                data: [],
                align: ['left'],
                // columnWidth: [50],
                rowNum:4,
                oddRowBGC:'#FAFAFA',
                evenRowBGC:'#ECEEF2',
            },
            abnormalList:[],
            abnormalConfig:{
                header:['堤坝风险'],
                data: [],
                align: ['left'],
                // columnWidth: [50],
                rowNum:4,
                oddRowBGC:'#FAFAFA',
                evenRowBGC:'#ECEEF2',
            },
            titleName:null,
            value:new Date(),
            value02:formatTimestamp(new Date(),'h'),
            radio1:'',
            geologyEntityCode:'',
            geologyEntityList:[],
            getGeologysImge:null,
            StationIid:'',
            filterText: '',
            mixinLoading:false,
            treeLoading:false,
            data: [],
            defaultExpandedKeys:[],//默认展开
            defaultProps: {
                children: 'accountFanslist',
                label: 'name'
            },
            reservoirData:null
        }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
    },
    created() {
        this.queryDeptTree()
        this.abnormalData()
    },
    mounted() {
        // var player = new EZUIKit.EZUIPlayer("videoccc")
    },
    methods: {
        //异常数据
        abnormalData(){
            homeApi.findRiskErr().then(res => {
                console.log(res.data)
                let listData = res.data
                if(listData.length > 0){
                    this.statusList = listData
                    let dataa = []
                    for (var i = 0; i < listData.length; i++) {
                        let text = ``
                        text = `<div>${listData[i].reservoirName}<span style="color:#FE0005">异常</span></div>`
                        let textdd = text.split(',')
                        dataa.push(textdd)
                    }
                    this.statusConfig.data = dataa
                }
            }).catch(err=>{
            })
            homeApi.findRunErr().then(res => {
                console.log(res.data)
                let listData = res.data
                if(listData.length > 0){
                    this.abnormalList = listData
                    let dataa = []
                    for (var i = 0; i < listData.length; i++) {
                        let text = ``
                        text = `<div>${listData[i].reservoirName}<span style="color:#FE0005">异常</span></div>`
                        let textdd = text.split(',')
                        dataa.push(textdd)
                    }
                    this.abnormalConfig.data = dataa
                }
            }).catch(err=>{
            })
        },
        queryDeptTree() {
            this.treeLoading = true
            commonApi.queryAera().then(res => {
                this.setName(res.data)
                this.defaultExpandedKeys = [res.data[0].code]
                this.data = res.data
                console.log(this.$refs.tree.updateKeyChildren())
                this.getQueryData()
                this.treeLoading = false
            }).catch(err=>{
                this.treeLoading = false
            })
        },
        getQueryData(){
            this.mixinLoading = true
            homeApi.findByIdHour({
                ddatetime:formatTimestamp(this.value,'yyyy-MM-dd'),
                hours:this.value02,
                stationId:this.StationIid
            }).then(res => {
                this.reservoirData = res.data
                this.geologyEntityList = res.data.geologyEntityList
                this.geologyEntityCode = this.geologyEntityList[0].sensorCode
                this.getGeologyImge(this.geologyEntityList[0].sensorCode)
                this.mixinLoading = false
            }).catch(err=>{
                this.mixinLoading = false
            })
        },
        getGeologyImge(val){
            let timen = `${formatTimestamp(this.value,'yyyy-MM-dd')} ${this.value02}:00:00`
            homeApi.getGeologyImge({
                ddatetime:formatTimestamp(timen),
                sensorCode:val,
                stationId:this.StationIid
            }).then(res => {
                console.log(res.data)
                this.getGeologysImge = res.data
                // this.reservoirData = res.data
            }).catch(err=>{
            })
        },
        onDatepicker(val){
            this.getQueryData()
        },
        onSelectTime(val){
            this.getQueryData()
        },
        onSelectGeology(val){
            this.getGeologyImge(val)
        },
        
        // onRadio(val){
        //     this.getQueryData()
        // },
        filterNode(value, data) {
            if (!value) return true
            return data.name.indexOf(value) !== -1
        },
        handleNodeClick(data) {
            if(data.stationId){
                this.StationIid = data.stationId
                this.titleName = `${data.province}${data.city}${data.country}${data.reservoirName}`
                this.getQueryData()
            }
        },
        //省市区查询水库递归
        setName(datas){ //遍历树  获取id数组
            for(var i in datas){
                if(datas[i].accountFanslist){  //存在子节点就递归
                    this.setName(datas[i].accountFanslist);
                }else {
                    if(datas[i].list){
                        datas[i].list.map(item=>{
                            item.name = item.reservoirName
                            item.code = item.stationId
                            if(this.$route.query.stationId && this.$route.query.stationId  == item.stationId){
                                this.StationIid = item.stationId
                                this.titleName = `${item.province}${item.city}${item.country}${item.reservoirName}`
                            }
                        })
                        if(this.titleName == null){
                            this.StationIid = datas[i].list[0].stationId
                            this.titleName = `${datas[i].list[0].province}${datas[i].list[0].city}${datas[i].list[0].country}${datas[i].list[0].reservoirName}`
                        }
                        datas[i].accountFanslist = datas[i].list
                    }
                }
            }
        },
    }
}
</script>
<style lang='scss' scoped>
.warp{
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    box-shadow: 0px 0px 14px 0px rgba(214, 214, 214, 0.25);
    border-radius: 6px;
}
.title{
    height: 70px;
    .titleV{
        height: 20px;
        line-height: 20px;
        margin-left: 20px;
        padding-left: 10px;
        border-left: 4px solid #0AAFF5 ;
        font-size: 20px;
    }
}
.contentV{
    height: calc(100% - 90px);
    padding: 0px 20px 20px 20px;
    display: flex;
    justify-content: space-between;
}
.content_left{
    width: 220px;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #E4E4E4;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
}
.content_right {
    width: calc(100% - 240px);
    height: auto;
    display: flex;
    justify-content: space-between;
    .content_right_left {
        width: 50%;
        .content_right_left_serch{
            display: flex;
            align-items: center;
            flex-flow: wrap;
            ::v-deep .el-date-editor.el-input, .el-date-editor.el-input__inner  {
                width: 130px;
                margin-right: 10px;
            }
            .input_ys {
                width: 100px;
                margin-right: 10px;
            }
        }
        .content_right_left_bottom {
            margin-top: 10px;
            border-radius: 10px;
            padding: 10px;
            box-sizing: border-box;
            border: 1px solid #E4E4E4;
            height: calc(100% - 42px);
            .content_right_left_bottom_top_card {
                height: 400px;
                .zanwuImg {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
            }
            .content_right_left_bottom_bottom {
                height: calc(100% - 400px);
                .echart_curve {
                    height: calc(100% - 40px);
                }
            }
        }
    }
    .content_right_right{
        width: 49%;
        .content_right_right_top{
            height: 180px;
            border-radius: 10px;
            margin-bottom: 15px;
            border: 1px solid #E4E4E4;
            .tableBox {
                height: calc(100% - 50px);
                display: flex;
                justify-content: space-around;
                >div{
                    width: calc(50% - 10px);
                    position: relative;
                    .txt_zanwu {
                        position: absolute;
                        left: 50%;
                        top: 50%;
                        font-size: 14px;
                        color: #9B9B9B;
                        transform: translate(-50%,-50%);
                    }
                }
            }
        }
        .content_right_right_center {
            height: calc(100% - 575px);
            display: flex;
            margin-bottom: 15px;
            justify-content: space-between;
            >div {
                width: calc(50% - 7.5px);
                border-radius: 10px;
                border: 1px solid #E4E4E4;
                .video-ty {
                    padding: 10px;
                    box-sizing: border-box;
                    height: calc(100% - 40px);
                    display: flex;
                    .video-ya {
                        object-fit:fill;
                        width: 100%;
                    }
                }
                .echart_risk {
                    height: calc(100% - 40px);
                }    
            }
        }
        .content_right_right_bottom{
            height: 360px;
            border-radius: 10px;
            border: 1px solid #E4E4E4;
            .content_right_right_bottom_card{

                margin: 0px 20px;
                display: flex;
                height: calc(100% - 50px);
                align-content: space-around;
                justify-content:space-between;
                flex-flow: wrap;
                >div {
                    width: calc(50% - 7.5px);
                    height: 140px;
                    border-radius: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .card_left {
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            align-items: flex-start;
                            padding-left: 20px;
                            .card_left_name {
                                line-height: 18px;
                                color: #FFFFFF;
                                font-size: 16px;
                                margin-bottom: 35px;
                            }
                            .card_left_detail {
                                font-size: 28px;
                                font-weight: bold;
                                color: #FFFFFF;
                            }
                    }
                    .card_right {
                        padding-right: 15px;
                    }
                }
                .bg1{
                    background: linear-gradient(0deg, #22A5BD, #37D6C1);
                }
                .bg2{
                    background: linear-gradient(0deg, #22BD84, #37D69C);
                }
                .bg3{
                    background: linear-gradient(0deg, #49B0F8, #2B98EC);
                }
                .bg4{
                    background: linear-gradient(0deg, #22A5BD, #37D6C1);
                }
            }
        }
    }
}
::v-deep .gai_yangs {
    width:100%;
    height:100%;
    color: #333;
    .header{
        background-color: rgba($color: #fff, $alpha: 0) !important;
        // background: linear-gradient(90deg, rgba($color: #00E4FF, $alpha: 0.3), rgba($color: #ED76FF, $alpha: 0.3));
    }
    // .row-item {
    //     border-bottom: 5px solid #fff;
    // }
    .ceil{
        >div {
            width: 100%;
        }
    }
}
</style>